import {
  Card,
  Typography,
  Row,
  Col,
  Statistic,
  Space,
  Tag,
  message,
} from "antd";
import { useEffect } from "react";
import { getSpringTest } from "../api/request";
import { useTheme } from "../contexts/ThemeContext";
import {
  UserOutlined,
  FileTextOutlined,
  AuditOutlined,
  BarChartOutlined,
  RocketOutlined,
  SafetyOutlined,
  BulbOutlined,
  DatabaseOutlined,
  ApiOutlined,
} from "@ant-design/icons";

const { Title, Paragraph, Text } = Typography;

export default function Home() {
  const { isDarkMode } = useTheme();

  // 页面挂载时请求后端接口，遇到 401 自动跳转
  useEffect(() => {
    getSpringTest().catch((err) => {
      if (err?.response?.status === 401) {
        // 401 跳转由拦截器处理
      } else {
        message.error("后端接口请求失败");
      }
    });
  }, []);

  return (
    <div style={{ maxWidth: 1200, margin: "20px auto", padding: "0 16px" }}>
      {/* 页面标题 */}
      <div
        style={{
          textAlign: "center",
          marginBottom: 32,
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
        }}>
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: "12px",
            marginBottom: 8,
          }}>
          <img
            src="/scnu-logo.png"
            alt="华师logo"
            style={{ width: 40, height: 40 }}
          />
          <Title level={2} style={{ color: "#1890ff", marginBottom: 0 }}>
            华师计算机学院IT智能博客推荐与知识问答系统
          </Title>
        </div>
        <Paragraph
          style={{
            fontSize: 16,
            color: isDarkMode ? "#888" : "#666",
            transition: "color 0.3s ease",
          }}>
          基于微服务架构、多框架实现，集成RAG问答与智能推荐的IT技术知识共享平台
        </Paragraph>
      </div>
      <Card
        style={{
          maxWidth: 1000,
          margin: "20px auto",
          borderRadius: 12,
          boxShadow: isDarkMode
            ? "0 2px 12px rgba(0,0,0,0.3)"
            : "0 2px 12px #eee",
          backgroundColor: isDarkMode ? "#1f1f1f" : "#ffffff",
          borderColor: isDarkMode ? "#434343" : "#d9d9d9",
          transition: "all 0.3s ease",
        }}>
        <Row gutter={[24, 24]} style={{ marginBottom: 40 }}>
          <Col xs={24} sm={12} md={6}>
            <Card size="small" style={{ textAlign: "center", height: "100%" }}>
              <UserOutlined
                style={{ fontSize: 32, color: "#52c41a", marginBottom: 8 }}
              />
              <Statistic title="用户管理" value="100+" suffix="用户" />
              <Text type="secondary">Spring 框架 + MySQL 存储</Text>
            </Card>
          </Col>
          <Col xs={24} sm={12} md={6}>
            <Card size="small" style={{ textAlign: "center", height: "100%" }}>
              <FileTextOutlined
                style={{ fontSize: 32, color: "#1890ff", marginBottom: 8 }}
              />
              <Statistic title="博客推荐" value="10000+" suffix="篇" />
              <Text type="secondary">Gin 框架 + ES 搜索引擎</Text>
            </Card>
          </Col>
          <Col xs={24} sm={12} md={6}>
            <Card size="small" style={{ textAlign: "center", height: "100%" }}>
              <AuditOutlined
                style={{ fontSize: 32, color: "#fa541c", marginBottom: 8 }}
              />
              <Statistic title="RAG大模型问答" value="100+" suffix="次" />
              <Text type="secondary">FastAPI 框架 + LangChain 框架</Text>
            </Card>
          </Col>
          <Col xs={24} sm={12} md={6}>
            <Card size="small" style={{ textAlign: "center", height: "100%" }}>
              <BarChartOutlined
                style={{ fontSize: 32, color: "#722ed1", marginBottom: 8 }}
              />
              <Statistic title="统计分析" value="5" suffix="项" />
              <Text type="secondary">FastAPI 框架 + Hadoop 框架</Text>
            </Card>
          </Col>
          {/* 新增分类管理、用户聊天、向量检索、评论管理 */}
          <Col xs={24} sm={12} md={6}>
            <Card size="small" style={{ textAlign: "center", height: "100%" }}>
              <BulbOutlined
                style={{ fontSize: 32, color: "#faad14", marginBottom: 8 }}
              />
              <Statistic title="分类管理" value="80+" suffix="类" />
              <Text type="secondary">Spring 框架 + Redis 缓存</Text>
            </Card>
          </Col>
          <Col xs={24} sm={12} md={6}>
            <Card size="small" style={{ textAlign: "center", height: "100%" }}>
              <RocketOutlined
                style={{ fontSize: 32, color: "#13c2c2", marginBottom: 8 }}
              />
              <Statistic title="用户聊天" value="1000+" suffix="会话" />
              <Text type="secondary">Gin 框架 + WebSocket 服务</Text>
            </Card>
          </Col>
          <Col xs={24} sm={12} md={6}>
            <Card size="small" style={{ textAlign: "center", height: "100%" }}>
              <FileTextOutlined
                style={{ fontSize: 32, color: "#a0d911", marginBottom: 8 }}
              />
              <Statistic title="评论管理" value="10000+" suffix="条" />
              <Text type="secondary">Spring 框架 + MySQL 存储</Text>
            </Card>
          </Col>
          <Col xs={24} sm={12} md={6}>
            <Card size="small" style={{ textAlign: "center", height: "100%" }}>
              <DatabaseOutlined
                style={{ fontSize: 32, color: "#2f54eb", marginBottom: 8 }}
              />
              <Statistic title="日志管理" value="100000+" suffix="条" />
              <Text type="secondary">NestJS 框架 + MongoDB 存储</Text>
            </Card>
          </Col>
        </Row>

        <div style={{ marginBottom: 32 }}>
          <Title level={3} style={{ marginBottom: 16 }}>
            <BulbOutlined /> 系统核心功能模块
          </Title>
          <Row gutter={[16, 16]}>
            <Col xs={24} md={12}>
              <Card size="small" style={{ height: "100%" }}>
                <Title level={4}>智能推荐与搜索</Title>
                <Paragraph>
                  • ElasticSearch 全文检索引擎
                  <br />
                  • 倒排索引与分词技术
                  <br />
                  • AI评分与用户评分融合算法
                  <br />
                  • 基于内容的推荐策略
                  <br />
                  • 用户行为协同过滤
                  <br />• 多维度综合评分排序机制
                </Paragraph>
              </Card>
            </Col>
            <Col xs={24} md={12}>
              <Card size="small" style={{ height: "100%" }}>
                <Title level={4}>RAG 知识问答</Title>
                <Paragraph>
                  • LangChain Agent 框架
                  <br />
                  • ReAct 推理决策模式
                  <br />
                  • SQL 查询与数据库工具调用
                  <br />
                  • PostgreSQL pgvector 向量检索
                  <br />
                  • 通义千问嵌入模型集成
                  <br />• 递归文本切分与语义理解
                </Paragraph>
              </Card>
            </Col>
            <Col xs={24} md={12}>
              <Card size="small" style={{ height: "100%" }}>
                <Title level={4}>数据采集与处理</Title>
                <Paragraph>
                  • MySQL 关系型存储
                  <br />
                  • MongoDB 文档存储
                  <br />
                  • Redis 缓存加速
                  <br />
                  • 数据清洗与去重
                  <br />
                  • RabbitMQ 异步处理
                  <br />• Nacos 服务注册发现
                </Paragraph>
              </Card>
            </Col>
            <Col xs={24} md={12}>
              <Card size="small" style={{ height: "100%" }}>
                <Title level={4}>大数据分析与可视化</Title>
                <Paragraph>
                  • Hadoop 分布式存储
                  <br />
                  • Hive 数据仓库查询
                  <br />
                  • 文章阅读量 TOP 10 排行榜
                  <br />
                  • 用户搜索词云可视化
                  <br />
                  • 分类维度文章数分布
                  <br />• 月度文章发布趋势分析
                </Paragraph>
              </Card>
            </Col>
            <Col xs={24} md={12}>
              <Card size="small" style={{ height: "100%" }}>
                <Title level={4}>实时通信系统</Title>
                <Paragraph>
                  • Gin WebSocket 服务
                  <br />
                  • 用户实时在线聊天
                  <br />
                  • 消息即时推送
                  <br />
                  • 聊天队列管理
                  <br />
                  • MySQL 聊天记录持久化
                  <br />• 多用户Goroutine并发支持
                </Paragraph>
              </Card>
            </Col>
            <Col xs={24} md={12}>
              <Card size="small" style={{ height: "100%" }}>
                <Title level={4}>日志监控与链路追踪</Title>
                <Paragraph>
                  • NestJS MongoDB 日志存储
                  <br />
                  • Spring Boot API 接口日志
                  <br />
                  • 文章操作日志追踪
                  <br />
                  • 用户行为分析
                  <br />
                  • 微服务网关与负载均衡
                  <br />• 异常监控告警系统
                </Paragraph>
              </Card>
            </Col>
          </Row>
        </div>

        <div
          style={{
            textAlign: "center",
            padding: "24px 0",
            background: isDarkMode ? "#262626" : "#f8f9fa",
            borderRadius: 8,
            border: `1px solid ${isDarkMode ? "#434343" : "#e8e8e8"}`,
            transition: "all 0.3s ease",
          }}>
          <Title level={4} style={{ marginBottom: 16 }}>
            <SafetyOutlined /> 多框架微服务技术栈
          </Title>
          <Space wrap style={{ justifyContent: "center" }}>
            {/* 后端框架 */}
            <Tag color="orange">Spring</Tag>
            <Tag color="purple">Gin</Tag>
            <Tag color="cyan">NestJS</Tag>
            <Tag color="red">FastAPI</Tag>
            {/* 服务治理 */}
            <Tag color="geekblue">Nacos</Tag>
            {/* 数据库 */}
            <Tag color="volcano">MySQL</Tag>
            <Tag color="blue">PostgreSQL</Tag>
            <Tag color="magenta">MongoDB</Tag>
            {/* 缓存与消息队列 */}
            <Tag color="lime">Redis</Tag>
            <Tag color="cyan">RabbitMQ</Tag>
            <Tag color="gold">ElasticSearch</Tag>
            {/* 大数据与存储 */}
            <Tag color="purple">Hadoop</Tag>
            <Tag color="orange">Hive</Tag>
            <Tag color="red">阿里云OSS</Tag>
            {/* 部署与容器 */}
            <Tag color="yellow">Docker</Tag>
            <Tag color="green">Nginx</Tag>
            {/* AI与向量 */}
            <Tag color="magenta">RAG</Tag>
            <Tag color="purple">LangChain</Tag>
            <Tag color="red">LLM</Tag>
            <Tag color="cyan">Embedding</Tag>
            {/* 前端 */}
            <Tag color="blue">React</Tag>
            <Tag color="green">Ant Design</Tag>
            <Tag color="volcano">ECharts</Tag>
          </Space>
          <Paragraph style={{ marginTop: 16, marginBottom: 0 }}>
            基于多框架实现的微服务架构，融合RAG问答、智能推荐与大数据分析
          </Paragraph>
        </div>
      </Card>
    </div>
  );
}
